// 多标签页面组件
import { MenuProps, Dropdown, Tabs, theme } from 'antd';
import React from 'react';
import StickyBox from 'react-sticky-box';
import type { TabsProps } from 'antd';

interface Props {
    onChange: (key: string) => void;
    onEdit: (targetKey: React.MouseEvent | React.KeyboardEvent | string,
        action: 'add' | 'remove') => void;
    onRightClick?: (e: any) => void;
    items: any[];
    activeKey: string;
}


// 右键菜单列表
const triggerItems: MenuProps['items'] = [
    {
        label: '关闭当前',
        key: '1',
    },
    {
        label: '关闭其他',
        key: '2',
    },
    {
        label: '关闭所有',
        key: '3',
    },
]

const MutiTags: React.FC<Props> = ({ onChange, onEdit, onRightClick, items, activeKey }) => {
    const {
        token: { colorBgContainer },
    } = theme.useToken();

    const rightClick = (e: any) => {
        onRightClick && onRightClick(e);
    }

    const renderTabBar: TabsProps['renderTabBar'] = (props, DefaultTabBar) => (
        <StickyBox offsetTop={0} offsetBottom={20} style={{ zIndex: 9 }}>
            <DefaultTabBar {...props} className="box_shadows" style={{ background: colorBgContainer, padding: 10 }} />
        </StickyBox>
    );

    return (
        <Dropdown menu={{ items: triggerItems, onClick: (e) => { rightClick(e) } }} trigger={['contextMenu']}>
            <Tabs
                onEdit={onEdit}
                onChange={onChange}
                activeKey={activeKey}
                type="editable-card"
                hideAdd
                renderTabBar={renderTabBar}
                items={items}
            >
            </Tabs>
        </Dropdown>
    )
}

export default MutiTags;